<template>
	<div class="box11">
		<el-row>
			<el-col :span="22" :offset="1">
				<div class="header_add">
					<h3 class="add" v-if="flag2">添加</h3>
					<h3 class="add" v-if="flag1">修改</h3>
					<el-button type="primary" size="default" @click="backindex">返回</el-button>

				</div>

				<p class="goodsadd">商品图片</p>
				<div class="tabfrom">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item class="imageaa">
							<div class="image" prop="imgUrl">
								<el-upload
										ref="upload"
										class="avatar-uploader"
										:action="basurl+'ware/uploadImg'"
										:show-file-list="false"
										:on-success="handleAvatarSuccess"
										:before-upload="beforeAvatarUpload"
										><!-- :auto-upload="false" -->
										<img v-if="imgUrl" :src="imgUrl" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
							</div>
						</el-form-item>
						<el-form-item label="商品名称：" prop="wareName">
							<el-input placeholder="请填写商品名称" v-model="ruleForm.wareName"></el-input>
						</el-form-item>
						<el-form-item label="库存量：" prop="num">
							<el-input placeholder="请填写商品库存量" v-model="ruleForm.num"></el-input>
						</el-form-item>
						<el-form-item label="商品原价：" prop="price">
							<el-input placeholder="请填写商品原价" v-model="ruleForm.price"></el-input>
						</el-form-item>
						<el-form-item label="会员价：" prop="vipPrice">
							<el-input placeholder="请填写商品会员价" v-model="ruleForm.vipPrice"></el-input>
						</el-form-item>
						<el-form-item label="商品香型：" prop="flavor">
							<el-select v-model="ruleForm.flavor" placeholder="请选择商品香型">
								<el-option v-for="(flaovr, index) in flavorlist" :label="flaovr.classifyName"
									:key="flaovr.classifyId" :value="flaovr.classifyId"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品类别：" prop="type">
							<!-- 	<el-input placeholder="请填写类别" v-model="ruleForm.type"></el-input> -->
							<el-select v-model="ruleForm.type" placeholder="请选择商品类别">
								<el-option label="普通商品" value="0"></el-option>
								<el-option label="积分商品" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品度数：" prop="proof">
							<!-- <el-input placeholder="请填写商品度数" v-model="ruleForm.proof"></el-input> -->
							<el-select v-model="ruleForm.proof" placeholder="请选择商品度数">
								<el-option v-for="proof in prooflist" :label="proof.classifyName" :value="proof.classifyId"
									:key="proof.classifyId"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品品牌：" prop="brand">
							<!-- 	<el-input placeholder="请填写商品品牌" v-model="ruleForm.brand"></el-input> -->
							<el-select v-model="ruleForm.brand" placeholder="请选择商品品牌">
								<el-option v-for="brand in brandlist" :label="brand.classifyName" :value="brand.classifyId"
									:key="brand.classifyId"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品备注：" prop="wareDescr">
							<el-input placeholder="请填写商品备注" v-model="ruleForm.wareDescr"></el-input>
						</el-form-item>
						<el-form-item label="商品详情：" prop="wareDetails">
							<!-- <el-input placeholder="请填写商品详情" v-model="ruleForm.wareDetails"></el-input> -->
							<el-input type="textarea" v-model="ruleForm.wareDetails"></el-input>
						</el-form-item>
						<el-form-item class="btnadd">
							<el-button v-if="flag2" type="primary" @click="addtquedng('ruleForm')">添加</el-button>
							<el-button v-if="flag2" @click="resetForm('ruleForm')">重置</el-button>
							<el-button v-if="flag1" type="primary" @click="xuigaigoods('ruleForm')">修改</el-button>
							<el-button v-if="flag1" type="primary" @click="nogoods('ruleForm')">取消</el-button>

						</el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		var numku = (rule, value, callback) => {
			var reg = /^[0-9]*$/
			if (value === '') {
				callback(new Error('请输入库存量'));
			} else if (!reg.test(value)) {
				callback(new Error('只能填数字'));
			} else {
				callback();
			}
		}
		var numka = (rule, value, callback) => {
			var reg = /^[0-9]+\.{0,1}[0-9]{0,2}$/
			if (value === '') {
				callback(new Error('请输入价格'));
			} else if (!reg.test(value)) {
				callback(new Error('只能填数字'));
			} else {
				callback();
			}
		}
		var numkv = (rule, value, callback) => {
			var reg = /^[0-9]+\.{0,1}[0-9]{0,2}$/
			if (value === '') {
				callback(new Error('请输入库vip价格'));
			} else if (!reg.test(value)) {
				callback(new Error('只能填数字'));
			} else {
				callback();
			}
		}

		return {
			newwareId: "",//修改需要的id
			basurl: require('../assets/baseUrl').baseUrl,
			imgUrl: "",//require('../assets/add.jpg')
			filed: {},
			flag1: true,
			flag2: true,
			ruleForm: {
				wareName: '', //商品名称，String 1
				wareImg: '',//商品图片名称，String 1
				wareDetails: '',//商品详情，String 1
				wareDescr: '', //商品备注，String 1
				brand: "", //品牌ID,int 1
				flavor: '',//香型ID，int
				proof: "", //度数ID，int 1
				num: "",  //库存，int 1
				price: "",//原价，Bigdecmail 1
				vipPrice: "",//vipPrice，Bigdecmail 1
				type: "", //商品类型，int 1
			},
			rules: {
				wareName: [
					{ required: true, message: '请输入商品名称', trigger: 'change' },
				],
				wareDetails: [
					{ required: true, message: '请输入商品详情', trigger: 'change' }
				],
				wareDescr: [
					{ required: true, message: '请输入商品备注', trigger: 'change' }
				],
				brand: [
					{ required: true, message: '请选择品牌', trigger: 'change' }
				],
				flavor: [
					{ required: true, message: '请选择香型', trigger: 'change' }
				],
				proof: [
					{ required: true, message: '请选择度数', trigger: 'change' }
				],
				num: [
					{ validator: numku, trigger: 'change' }
				],
				price: [
					{ validator: numka, trigger: 'change' }
				],
				vipPrice: [
					{ validator: numkv, trigger: 'change' }
				],
				type: [
					{ required: true, message: '请选择度数', trigger: 'change' }
				],
			},
			brandlist: '',//所有品牌
			flavorlist: "",//所有香型
			prooflist: "",//所有度数


		};
	},
	methods: {
		handleAvatarSuccess(res, file) {
			this.ruleForm.wareImg=file.response.msg
        	this.imgUrl = URL.createObjectURL(file.raw);
      },
		//修改
		xuigaigoods(Formrule) {
			this.$refs[Formrule].validate((valid) => {
				if (valid) {
					
					this.$http.post(this.basurl + "ware/updateWare", {
						"wareId": this.newwareId,
						"wareName": this.ruleForm.wareName,      //商品名称，String
						"wareImg": this.ruleForm.wareImg,        //商品图片名称，String
						"wareDetails": this.ruleForm.wareDetails,   //商品详情，String
						"wareDescr": this.ruleForm.wareDescr,     //商品备注，String
						"brand": this.ruleForm.brand,                 //品牌ID,int
						"flavor": this.ruleForm.flavor,             //香型ID，int
						"proof": this.ruleForm.proof,             //度数ID，int
						"num": this.ruleForm.num,               //库存，ID
						"price": this.ruleForm.price,             //原价，Bigdecmail
						"vipPrice": this.ruleForm.vipPrice,           //vipPrice，Bigdecmail
						"type": this.ruleForm.type,
					}).then(res => {
						/* console.log(res) */
						if (res.data.code == 200) {
							this.$message.success('修改成功');
							this.$router.push("/projectmananger/projectlist")

						}
					})
				}
			})
		},
		//返回
		backindex() {
			this.$router.push("/projectmananger/projectlist")
		},
		//限制图片大小个图片类型
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		//点击确认添加
		addtquedng(Formrule) {
			if(this.imgUrl){
				this.addgoods(Formrule)
			}else{
				this.$message.error('请添加图片');
					this.addgoods(Formrule)
			}


		},
		//添加接口
		addgoods(Formrule) {
			/* 	console.log(this.ruleForm) */
			/* console.log(this.ruleForm.wareImg) */
			this.$refs[Formrule].validate((valid) => {
				/* console.log(valid) */
			/* 	console.log(this.ruleForm) */
				if (valid) {
					this.$http.post(this.basurl + "ware/insertWare", {
						"wareName": this.ruleForm.wareName,      //商品名称，String
						"wareImg": this.ruleForm.wareImg,        //商品图片名称，String
						"wareDetails": this.ruleForm.wareDetails,   //商品详情，String
						"wareDescr": this.ruleForm.wareDescr,     //商品备注，String
						"brand": this.ruleForm.brand,                 //品牌ID,int
						"flavor": this.ruleForm.flavor,             //香型ID，int
						"proof": this.ruleForm.proof,             //度数ID，int
						"num": this.ruleForm.num,               //库存，ID
						"price": this.ruleForm.price,             //原价，Bigdecmail
						"vipPrice": this.ruleForm.vipPrice,           //vipPrice，Bigdecmail
						"type": this.ruleForm.type,
					}).then(res => {
						/* console.log(res) */
						if (res.data.code == 200) {
							this.$message.success('添加成功');
							this.resetForm(Formrule)
						}
					})
				}
			})

		},
		//重置
		resetForm(ruleForm) {
			this.$refs[ruleForm].resetFields();
			this.imgUrl = ""
		},
		//获取所有品牌数据
		getbrandl() {
			this.$http.post(this.basurl + "classifyList", {
				classifyType: 0
			}).then(res => {
				/* console.log(res) */
				if (res.data.code == 200) {
					this.brandlist = res.data.data
				}
			})
		},
		//获取所有香型数据
		getflavor() {
			this.$http.post(this.basurl + "classifyList", {
				classifyType: 1
			}).then(res => {
				/* console.log(res) */
				if (res.data.code == 200) {
					this.flavorlist = res.data.data
				}
			})
		},
		//获取所有度数数据
		getproof() {
			this.$http.post(this.basurl + "classifyList", {
				classifyType: 2
			}).then(res => {
				/* console.log(res) */
				if (res.data.code == 200) {
					this.prooflist = res.data.data
				}
			})
		},
		//根据id获取要修改的数据
		getnewlist() {
			this.newwareId = this.$route.query.newwareId
			if (this.$route.query.newwareId) {
				this.$http.post(this.basurl + "ware/wareInfo", {
					wareId: this.newwareId
				}).then(res => {
					/* 	console.log(res) */
					if (res.data.code == 200) {
						this.ruleForm = res.data.data
						this.flag1 = true
						this.flag2 = false
						this.imgUrl = this.basurl + this.ruleForm.wareImg
					}
				})
			} else {
				this.flag2 = true
				this.flag1 = false

			}

		}



	},
	mounted() {
		this.getbrandl()
		this.getflavor()
		this.getproof()
		this.getnewlist()
	}
}
</script>
<style lang="less">
.box11 {
	width: 83vw;
	height: 92vh;

	.header_add {
		display: flex;
		justify-content: space-between;
	}

	.add {
		/* margin: 20px 0; */
	}


	.tabfrom {
		.el-form-item {
			margin-bottom: 22px;
			width: 26vw;
			display: inline-block;
		}

		.imageaa {
			width: 52vw;

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 148px;
				height: 148px;
				line-height: 148px;
				text-align: center;
			}

			.avatar {
				width: 148px;
				height: 148px;
				display: block;
			}


		}

		.btnadd {
			display: flex;
			justify-content: center;
			width: 52vw;
			margin-top: 30px;

			.el-form-item__content {
				margin-left: 0 !important;

			}
		}

	}
}
</style>